<template>
	<view>
		<u-sticky bgColor="#F3F5F7" offsetTop="0" customNavHeight="0">
			<u-status-bar></u-status-bar>
			<view class="" style="padding: 24rpx;">
				<u-swiper :list="list1" height="320rpx"></u-swiper>
			</view>
			<view class="top">
				<u-tabs :list="list4" lineWidth="44rpx" lineHeight='14rpx' :lineColor="`url(${lineBg}) 100% 100%`"
					:activeStyle="{
				            color: '#000000',
				            fontWeight: 'bold',
				            transform: 'scale(1.125)'
				        }" :inactiveStyle="{
				            color: '#666666',
				            transform: 'scale(1)'
				        }" itemStyle="padding-left: 24rpx; padding-right: 24rpx; height: 88rpx;font-size:32rpx;" @click="clicktab"
					:current='cur'>
				</u-tabs>
				<view class="u-flex u-flex-y-center" style="padding-right: 24rpx;" @click="guanl(true)"
					v-if="!isgl&&cur!=2">
					<image src="/static/home/gl.png" class="top__glicon" mode=""></image>
					<!-- <view class="top__glicon">

					</view> -->
					<view class="top__text">
						管理
					</view>
				</view>
				<view class="u-flex u-flex-y-center" style="padding-right: 24rpx;" v-if="isgl&&cur!=2"
					@click="guanl(false)">

					<view class="top__text">
						完成
					</view>
				</view>

			</view>
		</u-sticky>
		<!-- 我的书架 -->
		<view class="list" v-if="cur==1">
			<view @click="clickitem(item,index)" class="" v-for="(item,index) in booklist" :key="index">
				<bookitem :item="item" :isgl='isgl'></bookitem>
			</view>
		</view>
		<!-- 最近阅读 -->
		<view class="list" v-if="cur==0" style="padding: 24rpx;">
			<view @click="clickitem(item,index)" class="" v-for="(item,index) in booklist1" :key="index">
				<yuduitem :item="item" :isgl='isgl'></yuduitem>
			</view>
		</view>
		<!-- 任务 -->
		<view class="list" v-if="cur==2" style="padding: 24rpx;">
			<view class="list__rwitem">
				<image src="/static/home/qd.png" class="list__rwitem__qd" mode=""></image>
				<view class="list__rwitem__center">
					<view class="list__rwitem__title">
						每日签到
					</view>
					<view class="list__rwitem__tips">
						您已连续签到1天咯,继续加油哦~
					</view>
				</view>
				<view class="list__rwitem__btn" @click="navto('/pages/home/sign')">
					去完成
				</view>
			</view>
			<view class="list__rwitem">
				<image src="/static/home/wj.png" class="list__rwitem__wj" mode=""></image>
				<view class="list__rwitem__center">
					<view class="list__rwitem__title u-flex u-flex-y-center">
						调查问卷
						<view class="u-flex u-flex-y-center list__rwitem__jb">
							<image src="/static/home/jb.png" class="list__rwitem__jb__icon" mode=""></image>
							188金币
						</view>
					</view>
					<view class="list__rwitem__tips">
						请您帮忙完善调查问卷
					</view>
				</view>
				<view class="list__rwitem__btn">
					去完成
				</view>
			</view>
		</view>
		<view class="footer" v-if="isgl">
			<view class="u-flex u-flex-y-center" @click="clickquanxuan">
				<view class="footer__check">
					<image src="/static/cz/noxuan.png" v-if="!isquanxuan" class="footer__check__icon" mode=""></image>
					<image src="/static/cz/xuan.png" v-else class="footer__check__icon" mode=""></image>
				</view>
				全选
			</view>
			<view class="footer__btn" @click="edit">
				删除
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1: [
					'/static/home/banner.png',
				],
				isquanxuan: false,
				cur: 0,
				lineBg: this.$store.state.lineBg,
				list4: [{
					name: '最近阅读'
				}, {
					name: '我的书架',
				}, {
					name: '任务',
				}, ],
				isgl: false,
				booklist: [{
						name: '浴火重生:绯色无疆',
						pic: '/static/pic.png',
						ischeck: false,
						zz: '爱虾的鱼'
					},
					{
						name: '浴火重生:绯色无疆',
						pic: '/static/pic.png',
						ischeck: false,
						zz: '爱虾的鱼'
					},
					{
						name: '浴火重生:绯色无疆',
						pic: '/static/pic.png',
						ischeck: false,
						zz: '爱虾的鱼'
					},
					{
						name: '浴火重生:绯色无疆',
						pic: '/static/pic.png',
						ischeck: false,
						zz: '爱虾的鱼'
					},
					{
						name: '浴火重生:绯色无疆',
						pic: '/static/pic.png',
						ischeck: false,
						zz: '爱虾的鱼'
					},
					{
						name: '浴火重生:绯色无疆',
						pic: '/static/pic.png',
						ischeck: false,
						zz: '爱虾的鱼'
					},
					{
						name: '浴火重生:绯色无疆',
						pic: '/static/pic.png',
						ischeck: false,
						zz: '爱虾的鱼'
					},
					{
						name: '浴火重生:绯色无疆',
						pic: '/static/pic.png',
						ischeck: false,
						zz: '爱虾的鱼'
					},
					{
						name: '浴火重生:绯色无疆',
						pic: '/static/pic.png',
						ischeck: false,
						zz: '爱虾的鱼'
					},
					{
						name: '浴火重生:绯色无疆',
						pic: '/static/pic.png',
						ischeck: false,
						zz: '爱虾的鱼'
					},
					{
						name: '浴火重生:绯色无疆',
						pic: '/static/pic.png',
						ischeck: false,
						zz: '爱虾的鱼'
					},
					{
						name: '浴火重生:绯色无疆',
						pic: '/static/pic.png',
						ischeck: false,
						zz: '爱虾的鱼'
					},
					{
						name: '浴火重生:绯色无疆',
						pic: '/static/pic.png',
						ischeck: false,
						zz: '爱虾的鱼'
					},
				],
				booklist1: [{
					name: '浴火重生:绯色无疆',
					pic: '/static/pic.png',
					ischeck: false,
					gx: '更新至：第2508章 大结局',
					sc: '上次读到：第1章 二十三年前的悬案'
				}, {
					name: '浴火重生:绯色无疆',
					pic: '/static/pic.png',
					ischeck: false,
					gx: '更新至：第2508章 大结局',
					sc: '上次读到：第1章 二十三年前的悬案'
				}, {
					name: '浴火重生:绯色无疆',
					pic: '/static/pic.png',
					ischeck: false,
					gx: '更新至：第2508章 大结局',
					sc: '上次读到：第1章 二十三年前的悬案'
				}, {
					name: '浴火重生:绯色无疆',
					pic: '/static/pic.png',
					ischeck: false,
					gx: '更新至：第2508章 大结局',
					sc: '上次读到：第1章 二十三年前的悬案'
				}, {
					name: '浴火重生:绯色无疆',
					pic: '/static/pic.png',
					ischeck: false,
					gx: '更新至：第2508章 大结局',
					sc: '上次读到：第1章 二十三年前的悬案'
				}, {
					name: '浴火重生:绯色无疆',
					pic: '/static/pic.png',
					ischeck: false,
					gx: '更新至：第2508章 大结局',
					sc: '上次读到：第1章 二十三年前的悬案'
				}, {
					name: '浴火重生:绯色无疆',
					pic: '/static/pic.png',
					ischeck: false,
					gx: '更新至：第2508章 大结局',
					sc: '上次读到：第1章 二十三年前的悬案'
				}, {
					name: '浴火重生:绯色无疆',
					pic: '/static/pic.png',
					ischeck: false,
					gx: '更新至：第2508章 大结局',
					sc: '上次读到：第1章 二十三年前的悬案'
				}, {
					name: '浴火重生:绯色无疆',
					pic: '/static/pic.png',
					ischeck: false,
					gx: '更新至：第2508章 大结局',
					sc: '上次读到：第1章 二十三年前的悬案'
				}, {
					name: '浴火重生:绯色无疆',
					pic: '/static/pic.png',
					ischeck: false,
					gx: '更新至：第2508章 大结局',
					sc: '上次读到：第1章 二十三年前的悬案'
				}, {
					name: '浴火重生:绯色无疆',
					pic: '/static/pic.png',
					ischeck: false,
					gx: '更新至：第2508章 大结局',
					sc: '上次读到：第1章 二十三年前的悬案'
				}, {
					name: '浴火重生:绯色无疆',
					pic: '/static/pic.png',
					ischeck: false,
					gx: '更新至：第2508章 大结局',
					sc: '上次读到：第1章 二十三年前的悬案'
				}, {
					name: '浴火重生:绯色无疆',
					pic: '/static/pic.png',
					ischeck: false,
					gx: '更新至：第2508章 大结局',
					sc: '上次读到：第1章 二十三年前的悬案'
				}, {
					name: '浴火重生:绯色无疆',
					pic: '/static/pic.png',
					ischeck: false,
					gx: '更新至：第2508章 大结局',
					sc: '上次读到：第1章 二十三年前的悬案'
				}, {
					name: '浴火重生:绯色无疆',
					pic: '/static/pic.png',
					ischeck: false,
					gx: '更新至：第2508章 大结局',
					sc: '上次读到：第1章 二十三年前的悬案'
				}, ],
				listarr: ['booklist1', 'booklist']
			};
		},
		onLoad() {
			// this.lineBg=this.$store.state.lineBg
			// console.log(this.lineBg)
		},
		methods: {
			guanl(i) {

				if (i) {
					setTimeout(() => {
						this.isgl = i
					}, 100)
					uni.hideTabBar()
				} else {
					setTimeout(() => {
						uni.showTabBar()
					}, 100)
					this.isgl = i
				}

			},
			clicktab(item) {
				// console.log(item)
				this.cur = item.index
				this.guanl(false)
				this.booklist.map(t => {
					t.ischeck = false
				})
			},
			clickitem(item, index) {
				// 判断是什么类型
				// let typelistarr=['booklist1','booklist']

				// 判断是否是管理状态
				if (this.isgl) {
					// console.log(item,index)
					this[this.listarr[this.cur]][index].ischeck = !this[this.listarr[this.cur]][index].ischeck
				}else{
					// 跳转阅读
					this.navto('/pages/home/shudetail')
				}
			},
			clickquanxuan() {
				let it = this
				this.isquanxuan = !this.isquanxuan
				this.booklist.map(t => {
					t.ischeck = it.isquanxuan
				})
			},
			edit() {
				let arr = []
				let it = this
				this[this.listarr[this.cur]].map(t => {
					if (t.ischeck) {
						arr.push(t)
					}
				})
				console.log(arr)
			}
		}
	}
</script>

<style lang="scss">
	.top {
		height: 98rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		&__glicon {
			width: 32rpx;
			height: 32rpx;
			margin-right: 4rpx;
		}

		&__text {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			line-height: 28rpx;

		}
	}

	.list {
		padding-top: 24rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;

		&__rwitem {
			margin-bottom: 24rpx;
			width: 654rpx;
			padding: 50rpx 24rpx;
			background: #FFFFFF;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			&__qd {
				width: 80rpx;
				height: 80rpx;
			}

			&__wj {
				width: 88rpx;
				height: 88rpx;
			}

			&__center {
				flex: 1;
				margin: 0 16rpx;

			}

			&__title {
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: #000000;
				line-height: 44rpx;
			}

			&__tips {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
				line-height: 40rpx;
			}

			&__jb {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #FDC72F;
				line-height: 34rpx;
				margin-left: 24rpx;

				&__icon {
					width: 32rpx;
					height: 32rpx;
					margin-right: 8rpx;
				}
			}

			&__btn {
				padding: 0 16rpx;
				line-height: 48rpx;
				background: #51CAEF;
				border-radius: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}

	}

	.footer {
		width: 702rpx;
		padding: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 32rpx;
		color: #333333;
		line-height: 44rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;

		&__check {
			display: flex;
			align-items: center;
			justify-content: center;

			&__icon {
				width: 36rpx;
				height: 36rpx;
				margin-right: 16rpx;
			}
		}

		&__btn {
			width: 354rpx;
			height: 88rpx;
			background: #51CAEF;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 38rpx;
		}
	}
</style>